﻿@Styles.Render("~/Content/Home.css")


<div id="container" style="width: 100%; height: 100%">
    <div class="events">
        <h3>Events</h3>
        <ul class="group">
            <li class="group-item"><span class="label label-default">10:00</span> A new XDS was registered</li>
            <li class="group-item"><span class="label label-warning">09:52</span> Authentication failed for user 'admin'</li>
            <li class="group-item"><span class="label label-default">09:42</span> New samples were uploaded</li>
            <li class="group-item"><span class="label label-default">09:30</span> New samples were uploaded</li>
            <li class="group-item"><span class="label label-danger">09:01</span> Failed to connect to DB Europe66</li>
            <li class="group-item"><span class="label label-default">08:54</span> New samples were uploaded</li>
            <li class="group-item"><span class="label label-danger">08:47</span> New samples were uploaded</li>
            <li class="group-item"><span class="label label-default">08:30</span> New samples were uploaded</li>
            <li class="group-item"><span class="label label-default">07:01</span> New samples were uploaded</li>
            <li class="group-item"><span class="label label-warning">06:52</span> Data cleanup job failed for network 'EU'</li>
        </ul>
    </div>
    <div class="active">
        <h3>Active <small>update sessions count</small></h3>
        <div id="graphics"></div>
    </div>
    <div class="spidometres">
        <div class="spidometr">
            <h3><a href="./Stat/Display/RAM/Minute">RAM </a><small>usage</small></h3>
            <div id="ram"></div>
        </div>
        <div class="spidometr">
            <h3><a href="./Stat/Display/CPU/Minute">CPU </a><small>usage</small></h3>
            <div id="cpu">
            </div>
        </div>
        <div class="spidometr">
            <h3><a href="./Stat/Display/HDD/Minute">HDD </a><small>activity</small></h3>
            <div id="hdd">
            </div>
        </div>
        <div class="spidometr">
            <h3><a href="./Stat/FreeSpace">Disk Space </a><small>(C:)</small></h3>
            <div id="FS">
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/signalr")
    @Scripts.Render("~/bundles/highcharts")
    <script src="~/signalr/hubs"></script>

    <script type="text/javascript">
        var diskUsageChart;
        var cpuUsageChart;
        var ramUsageChart;
        var diskSpaceUsageChart;
        var updateSessionsChart;
        var drawSessionsChart;

        $(document).ready(function () {
            Highcharts.setOptions({
                global: {
                    useUTC: true
                }
            });
        });

        $(function () {

            diskUsageChart = new Highcharts.Chart({
                chart: {
                    type: 'gauge',
                    renderTo: 'hdd',
                    plotBackgroundColor: null,
                    plotBackgroundImage: null,
                    plotBorderWidth: 0,
                    plotShadow: false
                },

                title: {
                    text: null
                },

                credits: {
                    enabled: false
                },

                exporting: {
                    enabled: false
                },

                pane: {
                    startAngle: -150,
                    endAngle: 150,
                    background: [{
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#FFF'],
                                [1, '#333']
                            ]
                        },
                        borderWidth: 0,
                        outerRadius: '109%'
                    }, {
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#333'],
                                [1, '#FFF']
                            ]
                        },
                        borderWidth: 1,
                        outerRadius: '107%'
                    }, {
                        // default background
                    }, {
                        backgroundColor: '#DDD',
                        borderWidth: 0,
                        outerRadius: '105%',
                        innerRadius: '103%'
                    }]
                },

                // the value axis
                yAxis: {
                    min: 0,
                    max: 100,

                    minorTickInterval: 'auto',
                    minorTickWidth: 1,
                    minorTickLength: 10,
                    minorTickPosition: 'inside',
                    minorTickColor: '#666',

                    tickPixelInterval: 30,
                    tickWidth: 2,
                    tickPosition: 'inside',
                    tickLength: 10,
                    tickColor: '#666',
                    labels: {
                        step: 2,
                        rotation: 'auto'
                    },
                    title: {
                        text: null
                    },
                    plotBands: [{
                        from: 0,
                        to: 75,
                        color: '#55BF3B' // green
                    }, {
                        from: 75,
                        to: 90,
                        color: '#DDDF0D' // yellow
                    }, {
                        from: 90,
                        to: 100,
                        color: '#DF5353' // red
                    }]
                },

                series: [{
                    name: 'Disk usage',
                    data: [0],
                    tooltip: {
                        valueSuffix: ' %'
                    }
                }]

            });

            cpuUsageChart = new Highcharts.Chart({
                chart: {
                    type: 'gauge',
                    renderTo: 'cpu',
                    plotBackgroundColor: null,
                    plotBackgroundImage: null,
                    plotBorderWidth: 0,
                    plotShadow: false
                },

                title: {
                    text: null
                },

                credits: {
                    enabled: false
                },

                exporting: {
                    enabled: false
                },

                pane: {
                    startAngle: -150,
                    endAngle: 150,
                    background: [{
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#FFF'],
                                [1, '#333']
                            ]
                        },
                        borderWidth: 0,
                        outerRadius: '109%'
                    }, {
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#333'],
                                [1, '#FFF']
                            ]
                        },
                        borderWidth: 1,
                        outerRadius: '107%'
                    }, {
                        // default background
                    }, {
                        backgroundColor: '#DDD',
                        borderWidth: 0,
                        outerRadius: '105%',
                        innerRadius: '103%'
                    }]
                },

                // the value axis
                yAxis: {
                    min: 0,
                    max: 100,

                    minorTickInterval: 'auto',
                    minorTickWidth: 1,
                    minorTickLength: 10,
                    minorTickPosition: 'inside',
                    minorTickColor: '#666',

                    tickPixelInterval: 30,
                    tickWidth: 2,
                    tickPosition: 'inside',
                    tickLength: 10,
                    tickColor: '#666',
                    labels: {
                        step: 2,
                        rotation: 'auto'
                    },
                    title: {
                        text: null
                    },
                    plotBands: [{
                        from: 0,
                        to: 75,
                        color: '#55BF3B' // green
                    }, {
                        from: 75,
                        to: 90,
                        color: '#DDDF0D' // yellow
                    }, {
                        from: 90,
                        to: 100,
                        color: '#DF5353' // red
                    }]
                },

                series: [{
                    name: 'CPU usage',
                    data: [0],
                    tooltip: {
                        valueSuffix: ' %'
                    }
                }]

            });

            ramUsageChart = new Highcharts.Chart({
                chart: {
                    renderTo: 'ram',
                    plotBackgroundColor: null,
                    plotBorderWidth: 0,
                    plotShadow: false
                },

                title: {
                    text: null
                },

                credits: {
                    enabled: false
                },

                exporting: {
                    enabled: false
                },

                tooltip: {
                    pointFormat: '<b>{point.y:.1f} MB</b>'
                },

                plotOptions: {
                    pie: {
                        dataLabels: {
                            enabled: true,
                            distance: -50,
                            style: {
                                fontWeight: 'bold',
                                color: 'white',
                                textShadow: '0px 1px 2px black'
                            }
                        }
                    }
                },

                series: [{
                    type: 'pie',
                    innerSize: '40%',
                    data: [['Free', 100.0], ['Used', 0.0]]
                }]
            });

            diskSpaceUsageChart = new Highcharts.Chart({
                chart: {
                    renderTo: 'FS',
                    plotBackgroundColor: null,
                    plotBorderWidth: 0,
                    plotShadow: false
                },

                title: {
                    text: null
                },

                credits: {
                    enabled: false
                },

                exporting: {
                    enabled: false
                },

                tooltip: {
                    pointFormat: '<b>{point.y:.1f} GB</b>'
                },

                plotOptions: {
                    pie: {
                        dataLabels: {
                            enabled: true,
                            distance: -50,
                            style: {
                                fontWeight: 'bold',
                                color: 'white',
                                textShadow: '0px 1px 2px black'
                            }
                        }
                    }
                },

                series: [{
                    type: 'pie',
                    innerSize: '40%',
                    data: [['Free', 100.0], ['Used', 0.0]]
                }]
            });

            // creates a proxy to the health check hub
            var hub = $.connection.mosaicHub;
            $.connection.hub.start();

            /*
            $.connection.hub.start().done(function () {
                alert("hub started");
            });
            */


            hub.client.updateHealthStatus = function (data) {
                var diskUsage = diskUsageChart.series[0].points[0];
                diskUsage.update(data.DiskUsage);

                var cpuUsage = cpuUsageChart.series[0].points[0];
                cpuUsage.update(data.CpuUsage);

                var ramData = [['Free', data.FreeRam], ['Used', data.UsedRam]];
                ramUsageChart.series[0].setData(ramData, true);

                var diskSpaceData = [['Free', data.FreeHDD], ['Used', data.UsedHDD]];
                diskSpaceUsageChart.series[0].setData(diskSpaceData, true);
            };
        });

        function firstDraw() {
            drawSessionsChart = new Highcharts.Chart({
                chart: {
                    height: 300,
                    type: 'spline',
                    renderTo: 'graphics',
                    animation: Highcharts.svg,
                    margingRight: 10
                },
                title: {
                    text: null
                },

                credits: {
                    enabled: false
                },

                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150
                },

                yAxis: {
                    min: 0,
                    title: {
                        text: null
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },

                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                    }
                },

                legend: {
                    enabled: false
                },

                exporting: {
                    enabled: false
                },

                series: [{
                    name: 'Update sessions count',
                    data: (function () {
                        // generate an array of random data
                        var data = [],
                            time = (new Date()).getTime() + 4 * 1000 * 60 * 60,
                            i;

                        for (i = -19; i <= 0; i++) {
                            data.push({
                                x: time + i * 1000,
                                y: parseInt(0 + Math.random() * 10)
                            });
                        }
                        return data;
                    })()
                }]
            })
        }
        $(firstDraw);

        function drawChart(tag) {
            var x = (new Date()).getTime() + 4 * 1000 * 60 * 60, // current time
                                    y = parseInt(0 + Math.random() * 10);
            drawSessionsChart.series[0].addPoint({
                x: x, y: y, marker: {
                    radius: 5,
                    symbol: 'circle',
                    fillColor: tag.TypeOfError == 0 ? '#3B97FF' :
                        tag.TypeOfError == 1 ? '#FCFF00' :
                        '#FF0000'
                }
            }, true, true);
        }


        //updateSessionsChart = new Highcharts.Chart({
        //chart: {
        //height: 300,
        //type: 'spline',
        //renderTo: 'graphics',
        //animation: Highcharts.svg, // don't animate in old IE
        //marginRight: 10,
        //events: {
        //    load: function (tag) {

        // set up the updating of the chart each second
        //            var series = this.series[0];
        //            setInterval(function () {

        //                series.addPoint({
        //                    x: x, y: y, marker: {
        //                        radius: 5,
        //                        symbol: 'circle',
        //                        fillColor: tag.TypeOfError == "NoError" ? '#3B97FF' :
        //                            tag.TypeOfError == "Warning" ? '#FCFF00' :
        //                            '#FF0000'
        //                    }
        //                }, true, true)
        //            }, 1000);
        //        }
        //    }
        //}
        //,

        //title: {
        //    text: null
        //},

        //credits: {
        //    enabled: false
        //},

        //xAxis: {
        //    type: 'datetime',
        //    tickPixelInterval: 150
        //},

        //yAxis: {
        //    min: 0,
        //    title: {
        //        text: null
        //    },
        //    plotLines: [{
        //        value: 0,
        //        width: 1,
        //        color: '#808080'
        //    }]
        //},

        //tooltip: {
        //    formatter: function () {
        //        return '<b>' + this.series.name + '</b><br/>' +
        //        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
        //        Highcharts.numberFormat(this.y, 2);
        //    }
        //},

        //legend: {
        //    enabled: false
        //},

        //exporting: {
        //    enabled: false
        //},

        //series: [{
        //    name: 'Update sessions count',
        //    data: (function () {
        //        // generate an array of random data
        //        var data = [],
        //            time = (new Date()).getTime(),
        //            i;

        //        for (i = -19; i <= 0; i++) {
        //            data.push({
        //                x: time + i * 1000,
        //                y: parseInt(0 + Math.random() * 10)
        //            });
        //        }
        //        return data;
        //    })()
        //}]
        //    });
        //}

        //$(drawChart(tag));

        //$(function drawChart(tag) {

        //    updateSessionsChart = new Highcharts.Chart({
        //        chart: {
        //            height: 300,
        //            type: 'spline',
        //            renderTo: 'graphics',
        //            animation: Highcharts.svg, // don't animate in old IE
        //            marginRight: 10,
        //            events: {
        //                load: function (tag) {

        //                    // set up the updating of the chart each second
        //                    var series = this.series[0];
        //                    setInterval(function () {
        //                        var x = (new Date()).getTime(), // current time
        //                            y = parseInt(0 + Math.random() * 10);
        //                        series.addPoint({
        //                            x: x, y: y, marker: {
        //                                radius: 5,
        //                                symbol: 'circle',
        //                                fillColor: tag.TypeOfError == "NoError" ? '#3B97FF' :
        //                                    tag.TypeOfError == "Warning" ? '#FCFF00':
        //                                    '#FF0000'
        //                            }
        //                        }, true, true)
        //                    }, 1000);
        //                }
        //            }
        //        },

        //        title: {
        //            text: null
        //        },

        //        credits: {
        //            enabled: false
        //        },

        //        xAxis: {
        //            type: 'datetime',
        //            tickPixelInterval: 150
        //        },

        //        yAxis: {
        //            min: 0,
        //            title: {
        //                text: null
        //            },
        //            plotLines: [{
        //                value: 0,
        //                width: 1,
        //                color: '#808080'
        //            }]
        //        },

        //        tooltip: {
        //            formatter: function () {
        //                return '<b>' + this.series.name + '</b><br/>' +
        //                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
        //                Highcharts.numberFormat(this.y, 2);
        //            }
        //        },

        //        legend: {
        //            enabled: false
        //        },

        //        exporting: {
        //            enabled: false
        //        },

        //        series: [{
        //            name: 'Update sessions count',
        //            data: (function () {
        //                // generate an array of random data
        //                var data = [],
        //                    time = (new Date()).getTime(),
        //                    i;

        //                for (i = -19; i <= 0; i++) {
        //                    data.push({
        //                        x: time + i * 1000,
        //                        y: parseInt(0 + Math.random() * 10)
        //                    });
        //                }
        //                return data;
        //            })()
        //        }]
        //    });
        //});

    </script>

    <script type="text/javascript">
        setInterval(requestData, 1000);
        function requestData() {
            $.ajax({
                url: '@Url.Action("Index", "TimeTags", null, null)',
                type: 'post',
                dataType: "json",
                success: function (tag) {
                    drawChart(tag);
                    if (tag.TypeOfError != 0)
                        updateNode(tag);
                },
                cache: false
            });
        }

        function updateNode(tag) {
            var element = document.getElementsByClassName('group')[0];

            if (element.childNodes.length >= 20) {
                element.removeChild(element.firstChild);
                element.removeChild(element.firstChild);
            }

            var second = tag.Seconds < 10 ? '0' + tag.Seconds : tag.Seconds;
            var minute = tag.Minute < 10 ? '0' + tag.Minute : tag.Minute;
            var hour = tag.Hour < 10 ? '0' + tag.Hour : tag.Hour;

            var newElementTextLi = document.createTextNode(' ' + tag.Error);
            var newElementTextSpan = document.createTextNode(hour + ':' + minute + ':' + second);

            var error = tag.TypeOfError == 0 ? "label-default" : tag.TypeOfError == 1 ? "label-warning" : "label-danger";

            var newElementSpan = document.createElement("span");
            newElementSpan.className = "label" + ' ' + error;
            newElementSpan.appendChild(newElementTextSpan);

            var newElementLi = document.createElement('li');
            newElementLi.className = "group-item";
            newElementLi.appendChild(newElementSpan);
            newElementLi.appendChild(newElementTextLi);

            element.appendChild(newElementLi);
            element.appendChild(document.createTextNode("\n"));
        }
    </script>
}
